<template>
  <div>
    <el-form-item ref="formItem" :label="labelText" size="mini">
      <el-select
        v-model="value"
        filterable
        :filter-method="PinyinMatchFun"
        placeholder="请选择"
        size="mini"
        :style="{ width: width }"
        clearable
        :disabled="isDisabled"
        :popper-append-to-body="false"
        @change="inputChange"
        @clear="handleClear"
      >
        <el-option
          @click.native="selectPlaceName(item.value, item.label)"
          v-for="(item, index) in queryInputList"
          :key="index"
          :label="item.label"
          :value="item.label"
        >
        </el-option>
      </el-select>
    </el-form-item>
  </div>
</template>
<script>
import PinyinMatch from 'pinyin-match'
export default {
  name: 'app',
  props: {
    prop: {
      type: String,
      default: '',
    },
    // 字典接口
    api: {
      type: Function,
    },
    // 下拉框label文字
    labelText: {
      type: String,
      default: '场站名称 : ',
    },
    // 下拉框宽度
    width: {
      type: String,
      default: '85%',
    },
    // 是否禁用
    isDisabled: {
      type: Boolean,
      default: false,
    },
    // 是否需要校验
    isRule: {
      type: Boolean,
      default: true,
    },
    // 查询条件
    queryParam1: {
      type: Object,
      default: () => {},
    },
  },
  mounted() {
    if (this.api) {
      this.api(this.queryParam1).then((res) => {
        this.queryInputList = res.data
        this.queryInputListCopy = JSON.parse(JSON.stringify(res.data))
      })
    }
  },
  data() {
    return {
      // 数据源
      queryInputList: [],
      // 复制一份数据
      queryInputListCopy: [],
      value: '',
    }
  },

  methods: {
    getDataInit() {
      if (this.api) {
        this.api(this.queryParam1).then((res) => {
          this.queryInputList = res.data
          this.queryInputListCopy = JSON.parse(JSON.stringify(res.data))
        })
      }
    },

    selectPlaceName(val, label) {
      this.$emit('inputChange', val)
    },
    inputChange(data) {
      // console.log('data',this.queryInputListCopy)
      // console.log('data',this.queryInputListCopy.filter(e=>e.label === data)[0].value)
      console.log(data)
      if (data) {
        let val = this.queryInputListCopy.filter((e) => e.label === data)[0]
          .value
        console.log(val)
        this.$emit('inputChange', val)
      }
    },
    handleClear() {
      this.value = '' // 清空选中的值
      this.$emit('handleClear', this.value)
    },
    // 过滤方法, 接收一个输入框内容作为参数, 当输入框内容改变后会执行
    PinyinMatchFun(val) {
      if (val) {
        // 定义一个空数组用来存储过滤后的数据
        var result = []
        // 开始循环过滤内容
        this.queryInputListCopy.forEach((i) => {
          // 调用 PinyinMatch.match 方法进行拼音与汉字匹配
          var m = PinyinMatch.match(i.label, val)
          if (m) {
            // 匹配成功则push到result数组中
            result.push(i)
          }
        })
        // 将过滤后的数组重新赋给下拉列表数据
        this.queryInputList = result
        this.value = val
      } else {
        // 如果输入框为空, 则将下拉列表数据还原
        this.queryInputList = this.queryInputListCopy
      }
    },
  },
}
</script>
